<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>补件</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/libs/layui/css/layui.css?v=${constants.getReleaseVersion()}"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=${constants.getReleaseVersion()}"
          media="all"/>
    <link rel="stylesheet" href="${ctxPath}/assets/expand/css/style.css?v=${constants.getReleaseVersion()}"
          media="all"/>
</head>
<body>
<form id="policyForm" lay-filter="policyForm" class="layui-form model-form">
    <input type="hidden" name="policyUrl1" id="policyUrl1">
    <input type="hidden" name="policyUrl2" id="policyUrl2">
    <input type="hidden" name="id" id="id" value="${id}">

    <div class="layui-form-item">
        <label class="layui-form-label">补件类型:</label>
        <div class="layui-input-block">
            <select class="layui-select" name="type" id="type" lay-filter="typeSelect">
                <option value="4">保单</option>
                <option value="5">发票</option>
                <option value="6">批单</option>
                <option value="7">投保单</option>
                <option value="8">经办人身份证</option>
                <option value="9">行驶证</option>
                <option value="10">新车合格证或发票</option>
                <option value="11">法人身份证</option>
                <option value="12">营业执照</option>
                <option value="13">经办人授权协议</option>
            </select>
        </div>
    </div>

    <div class="layui-tab-content">
        <!--保单-->
        <div class="layui-tab-item layui-show">
            <div class="layui-form-item">
                <label class="layui-form-label">保单类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="policyType" value="1" title="电子" checked="">
                    <input type="radio" name="policyType" value="2" title="纸质">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">保单号:</label>
                <div class="layui-input-block">
                    <input name="policyNo" id="policyNo" type="text" class="layui-input" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">保单起期</label>
                <div class="layui-input-block">
                    <input name="policyStart" id="policyStart" type="text" class="layui-input date-icon"
                            autocomplete="off" readonly/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">保单止期</label>
                <div class="layui-input-block">
                    <input name="policyEnd" id="policyEnd" type="text" class="layui-input date-icon"autocomplete="off" readonly/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择保单:</label>
                <div class="layui-upload">
                    <input type="hidden" name="policyUrl" id="policyUrl">
                    <button type="button" class="layui-btn" id="test3">选择保单</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="success1" style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--发票-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">发票类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="invoiceType" value="1" title="电子" checked="">
                    <input type="radio" name="invoiceType" value="2" title="纸质">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">发票号码:</label>
                <div class="layui-input-block">
                    <input name="invoiceNo" id="invoiceNo" type="text" class="layui-input" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择发票:</label>
                <div class="layui-upload">
                    <input type="hidden" name="invoiceUrl" id="invoiceUrl">
                    <button type="button" class="layui-btn" id="invoiceBtn">选择发票</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="invoiceBtnSuccess" style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--批单-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">批单类型:</label>
                <div class="layui-input-block">
                    <input type="radio" name="approvalType" value="1" title="电子" checked="">
                    <input type="radio" name="approvalType" value="2" title="纸质">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">批单号:</label>
                <div class="layui-input-block">
                    <input name="approvalNo" id="approvalNo" type="text" class="layui-input" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择批单:</label>
                <div class="layui-upload">
                    <input type="hidden" name="approvalUrl" id="approvalUrl">
                    <button type="button" class="layui-btn" id="approvalBtn">选择批单</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="approvalBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--投保单-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">选择投保单:</label>
                <div class="layui-upload">
                    <input type="hidden" name="prePolicyUrl" id="prePolicyUrl">
                    <button type="button" class="layui-btn" id="prePolicyBtn">选择投保单</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="prePolicyBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--经办人身份证-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">选择经办人身份证正面:</label>
                <div class="layui-upload">
                    <input type="hidden" name="idCardFontUrl" id="idCardFontUrl">
                    <button type="button" class="layui-btn" id="idCardFontBtn">选择经办人身份证正面</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="idCardFontBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">经办人身份证背面:</label>
                <div class="layui-upload">
                    <input type="hidden" name="idCardBackUrl" id="idCardBackUrl">
                    <button type="button" class="layui-btn" id="idCardBackBtn">选择经办人身份证背面</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="idCardBackBtnSuccess" style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--行驶证-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">行驶证正页:</label>
                <div class="layui-upload">
                    <input type="hidden" name="licenseFontUrl" id="licenseFontUrl">
                    <button type="button" class="layui-btn" id="licenseFontBtn">选择行驶证正页</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="licenseFontBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">行驶证副页:</label>
                <div class="layui-upload">
                    <input type="hidden" name="licenseBackUrl" id="licenseBackUrl">
                    <button type="button" class="layui-btn" id="licenseBackBtn">选择行驶证副页</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="licenseBackBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--新车合格证或发票-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">合格证或发票:</label>
                <div class="layui-upload">
                    <input type="hidden" name="carInoviceUrl" id="carInoviceUrl">
                    <button type="button" class="layui-btn" id="carInoviceBtn">选择合格证或发票</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="carInoviceBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--法人身份证-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">法人身份证正面:</label>
                <div class="layui-upload">
                    <input type="hidden" name="legalIdCardFontUrl" id="legalIdCardFontUrl">
                    <button type="button" class="layui-btn" id="legalIdCardFontBtn">选择法人身份证正面</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="legalIdCardFontBtnSuccess" style="display: none">上传成功
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">法人身份证背面:</label>
                <div class="layui-upload">
                    <input type="hidden" name="legalIdCardBackUrl" id="legalIdCardBackUrl">
                    <button type="button" class="layui-btn" id="legalIdCardBackBtn">选择法人身份证背面</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="legalIdCardBackBtnSuccess" style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--营业执照-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">企业营业执照:</label>
                <div class="layui-upload">
                    <input type="hidden" name="businesslicenseUrl" id="businesslicenseUrl">
                    <button type="button" class="layui-btn" id="businesslicenseBtn">选择企业营业执照</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="businesslicenseBtnSuccess" style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
        <!--经办人授权协议-->
        <div class="layui-tab-item">
            <div class="layui-form-item">
                <label class="layui-form-label">经办人授权协议:</label>
                <div class="layui-upload">
                    <input type="hidden" name="authorizedUrl" id="authorizedUrl">
                    <button type="button" class="layui-btn" id="authorizedBtn">选择经办人授权协议</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="authorizedBtnSuccess"
                            style="display: none">上传成功
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div class="layui-form-item text-right">
        <a class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</a>
        <a class="layui-btn" lay-filter="btnSubmit" lay-submit>保存</a>
    </div>
</form>
<script type="text/javascript">
    var Feng = {
        ctxPath: "${ctxPath}",
        version: '${constants.getReleaseVersion()}'
    };
</script>
<script type="text/javascript"
        src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'ax','laydate','upload'], function () {
        var $ = layui.$;
        var layer = layui.layer;
        var form = layui.form;
        table = layui.table;
        var $ax = layui.ax;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;

        //日期时间选择器
        laydate.render({
            elem: '#policyStart'
            ,trigger: 'click' //采用click弹出
            ,done: function(value, date, endDate){
                console.log(value); //得到日期生成的值，如：2017-08-18
                setDate(value);

            }
        });
        //日期时间选择器
        laydate.render({
            elem: '#policyEnd'
            ,trigger: 'click' //采用click弹出
        });

        var setDate = function (value) {
            var doc_type = document.querySelector(".cason-date-type.cur");
            var toubao_month = (doc_type) ? doc_type.getAttribute('data-type') : 12;
            $('.this_month').text(toubao_month);
            var d1 = new Date(value);
            var d2 = new Date(d1);
            d2.setMonth(d2.getMonth() + parseInt(toubao_month));
            console.log(d2.getMonth());
            d2.setDate(d2.getDate() - 1);
            var day = d2.getDate();
            day = (day < 10) ? "0" + day : day;
            var month = (d2.getMonth() + 1 < 10) ? "0" + (d2.getMonth() + 1) : d2.getMonth() + 1;
            $("#policyEnd").val(d2.getFullYear() + "-" + month + "-" + day);
        };

        //指定允许上传的文件类型
        upload.render({
            elem: '#test3'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                layer.msg('上传成功');
                if(res.code == 200){
                    $("#policyUrl").val(res.data.filePath);
                    $("#test3").css("display","none");
                    $("#success1").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });

        upload.render({
            elem: '#invoiceBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#invoiceUrl").val(res.data.filePath);
                    $("#invoiceBtn").css("display","none");
                    $("#invoiceBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#approvalBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#approvalUrl").val(res.data.filePath);
                    $("#approvalBtn").css("display","none");
                    $("#approvalBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#prePolicyBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#prePolicyUrl").val(res.data.filePath);
                    $("#prePolicyBtn").css("display","none");
                    $("#prePolicyBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });

        upload.render({
            elem: '#idCardFontBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#idCardFontUrl").val(res.data.filePath);
                    $("#idCardFontBtn").css("display","none");
                    $("#idCardFontBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });

        upload.render({
            elem: '#idCardBackBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#idCardBackUrl").val(res.data.filePath);
                    $("#idCardBackBtn").css("display","none");
                    $("#idCardBackBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#licenseFontBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#licenseFontUrl").val(res.data.filePath);
                    $("#licenseFontBtn").css("display","none");
                    $("#licenseFontBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#licenseBackBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#licenseBackUrl").val(res.data.filePath);
                    $("#licenseBackBtn").css("display","none");
                    $("#licenseBackBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#carInoviceBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#carInoviceUrl").val(res.data.filePath);
                    $("#carInoviceBtn").css("display","none");
                    $("#carInoviceBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#legalIdCardFontBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#legalIdCardFontUrl").val(res.data.filePath);
                    $("#legalIdCardFontBtn").css("display","none");
                    $("#legalIdCardFontBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#legalIdCardBackBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#legalIdCardBackUrl").val(res.data.filePath);
                    $("#legalIdCardBackBtn").css("display","none");
                    $("#legalIdCardBackBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#businesslicenseBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#businesslicenseUrl").val(res.data.filePath);
                    $("#businesslicenseBtn").css("display","none");
                    $("#businesslicenseBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });
        upload.render({
            elem: '#authorizedBtn'
            ,url: Feng.ctxPath + '/dfsfile/upload' //改成您自己的上传接口
            ,accept: 'file' //普通文件
            ,done: function(res){
                if(res.code == 200){
                    layer.msg('上传成功');
                    $("#authorizedUrl").val(res.data.filePath);
                    $("#authorizedBtn").css("display","none");
                    $("#authorizedBtnSuccess").css("display","block");
                } else {
                    Feng.error(res.message);
                }
            }
        });



        form.on('select(typeSelect)', function (data) {
            var index = data.elem.selectedIndex;

            $(".layui-tab-content").find(".layui-tab-item:eq(" + index + ")").addClass('layui-show').siblings().removeClass('layui-show');
        });

        function uploadSupInfo() {
          var type = $("#type").val();
            switch (parseInt(type)) {
                case 4://上传保单
                    var policyNo = $('#policyNo').val();
                    var policyStartTime = $('#policyStart').val();
                    var policyEndTime = $('#policyEnd').val();
                    var policyUrl = $('#policyUrl').val();
                    if (policyNo == "") {
                        Feng.info('请输入保单号！');
                        return false;
                    }
                    if (policyStartTime == "") {
                        Feng.info('请输入保单起始时间！');
                        return false;
                    }
                    if (policyEndTime == "") {
                        Feng.info('请输入保单截止时间！');
                        return false;
                    }
                    if (policyUrl == "") {
                        Feng.info('请选择保单文件！');
                        return false;
                    }
                    break;
                case 5://保单发票
                    var invoiceNo = $('#invoiceNo').val();
                    var invoiceUrl = $('#invoiceUrl').val();
                    if (invoiceNo == "") {
                        Feng.info('请输入发票号码！');
                        return false;
                    }
                    if (invoiceUrl == "") {
                        Feng.info('请选择发票文件！');
                        return false;
                    }
                    break;
                case 6://批单
                    var approvalNo = $('#approvalNo').val();
                    var approvalUrl = $('#approvalUrl').val();
                    if (approvalNo == "") {
                        Feng.info('请输入批单号码！');
                        return false;
                    }
                    if (approvalUrl == "") {
                        Feng.info('请选择批单文件！');
                        return false;
                    }
                    break;
                case 7://投保单
                    var prePolicyUrl = $('#prePolicyUrl').val();
                    if (prePolicyUrl == "") {
                        Feng.info('请选择投保单文件！');
                        return false;
                    }
                    break;
                case 8://经办人身份证
                    var idCardFontUrl = $('#idCardFontUrl').val();
                    var idCardBackUrl = $('#idCardBackUrl').val();
                    if (idCardFontUrl == "") {
                        Feng.info('请选择经办人身份证正面文件！');
                        return false;
                    }
                    if (idCardBackUrl == "") {
                        Feng.info('请选择经办人身份证背面文件！');
                        return false;
                    }
                    break;
                case 9://行驶证
                    var licenseFontUrl = $('#licenseFontUrl').val();
                    var licenseBackUrl = $('#licenseBackUrl').val();
                    if (licenseFontUrl == "") {
                        Feng.info('请选择行驶证正页文件！');
                        return false;
                    }
                    if (licenseBackUrl == "") {
                        Feng.info('请选择行驶证副页文件！');
                        return false;
                    }
                    break;
                case 10://行驶证
                    var carInoviceUrl = $('#carInoviceUrl').val();
                    if (carInoviceUrl == "") {
                        Feng.info('请选择合格证或发票文件！');
                        return false;
                    }
                    break;
                case 11://法人身份证
                    var legalIdCardFontUrl = $('#legalIdCardFontUrl').val();
                    var legalIdCardBackUrl = $('#legalIdCardBackUrl').val();
                    if (legalIdCardFontUrl == "") {
                        Feng.info('请选择法人身份证正面文件！');
                        return false;
                    }
                    if (legalIdCardBackUrl == "") {
                        Feng.info('请选择法人身份证背面文件！');
                        return false;
                    }
                    break;
                case 12://企业营业执照
                    var businesslicenseUrl = $('#businesslicenseUrl').val();
                    if (businesslicenseUrl == "") {
                        Feng.info('请选择企业营业执照文件！');
                        return false;
                    }
                    break;
                case 13://经办人授权协议
                    var authorizedUrl = $('#authorizedUrl').val();
                    if (authorizedUrl == "") {
                        Feng.info('请选择经办人授权协议文件！');
                        return false;
                    }
                    break;
            }
            return true;
        }
        // 表单提交事件
        form.on('submit(btnSubmit)', function (data) {

            var flag = uploadSupInfo();
            if(!flag){
                return false;
            }
            var index = top.layer.load(1, {shade: [0.5, '#393D49',]});
            var ajax = new $ax(Feng.ctxPath + "/insOrderFqZx/uploadSupplement", function (data) {
                if(data.code == 200){
                    Feng.info("补件成功!");
                } else {
                    Feng.error(data.message)
                }
                top.layer.close(index);
                //传给上个页面，刷新table用
                admin.putTempData('formOk', true);
                //关掉对话框
                admin.closeThisDialog();
            }, function (data) {
                Feng.error("补件失败!" + data.responseJSON.message + "!");
            },true);
            ajax.set(data.field);
            ajax.start();
        });

    });


</script>
</body>
</html>